<template>
  <div>
     <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">管理中心</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>报名详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-button style="float:left;margin-top: 15px;margin-left:15px;" type="primary" icon="el-icon-back" @click="openCourse()" >返回课程列表</el-button>
    <el-button style="float:left;margin-top: 15px;" type="primary" icon="el-icon-refresh" @click="load()" >刷新</el-button>

   <el-card style="margin: 15px 1%;width: 98%">
      <el-table :data="data" border style="width: 100%" :max-height="tableHeight">
        <el-table-column prop="username" label="用户名" fit></el-table-column> 
        <el-table-column prop="stuName" label="姓名" fit></el-table-column>
        <el-table-column prop="stuNo" label="学号" fit></el-table-column>
        <el-table-column prop="phone" label="电话" fit></el-table-column>
        <el-table-column prop="createTime" label="报名时间" fit></el-table-column>
        <el-table-column prop="payAmount" label="报名费用" fit></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CourseByUser',
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.load()
  },
  computed: {
    tableHeight () {
      // table  card的高度
      return window.innerHeight - 250
    }
  },
  methods: {
     openCourse () { // 返回课程列表
        this.$router.push({ path: '/admin/course' })
    },
    load () {
      var _this = this
       // 页面跳转传值
      var courseId = this.$route.params.courseId
      this.$axios.get('/admin/getStuListByCourseId/' + courseId).then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.data = resp.data.result
          this.$message({
            type: 'success',
            message: '获取成功'
          })
        } else {
          // 从后端返回错误信息
          this.$alert(resp.data.message, '错误提示', {
            type: 'error',
            dangerouslyUseHTMLString: true
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.add-button {
     margin: 0px 0 20px 15px;
  }
</style>
